﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewBag.Title = "题目管理";
    List<string> list = new List<string> { "A", "B", "C", "D" };

    //Quest quest = ViewBag.quest;
}
<style>
    #btnAnswers button {
        padding: 0em 1em;
    }

        #btnAnswers button[answer=true] {
            background-color: #FF5722;
        }

    #page input {
        width: 100%;
    }

    tr[select=true] {
        border: 2px solid red;
    }

    th {
        background-color: lightgray;
        height: 4em;
    }

    th, td {
        text-align: center;
    }

    td {
        padding: 0.6em;
    }

        th.left, td.left {
            text-align: left;
        }

        th.right, td.right {
            text-align: right;
        }

    #divleft tr.select {
        border: 1px solid red;
    }
</style>
<div>
    <a href="@Url.Action("QuestLib")" class="layui-btn"><i class="layui-icon layui-icon-prev"></i>题目库</a>
</div>
<input id="txtID" type="hidden" value="0" />
<div id="page">
    <div id="divleft" style="width:40%; float:left;margin:1em; padding:1em;">
        <table style="width:100%;">
            <thead>
                <tr>
                    <th style="min-width:4em;">属性</th>
                    <th>值</th>
                </tr>
            </thead>
            <tbody>
                <tr select="true" onclick="select(1);">
                    <td>题目</td>
                    <td class="left">
                        <input id="txtTitle" type="text" value="" placeholder="请输入题目" />
                    </td>
                </tr>
                <tr onclick="select(2);">
                    <td>选项A</td>
                    <td class="left"><input id="txtOptionA" type="text" value="" placeholder="请输入选项A" /></td>
                </tr>
                <tr onclick="select(3);">
                    <td>选项B</td>
                    <td class="left"><input id="txtOptionB" type="text" value="" placeholder="请输入选项B" /></td>
                </tr>
                <tr onclick="select(4);">
                    <td>选项C</td>
                    <td class="left"><input id="txtOptionC" type="text" value="" placeholder="请输入选项C" /></td>
                </tr>
                <tr onclick="select(5);">
                    <td>选项D</td>
                    <td class="left"><input id="txtOptionD" type="text" value="" placeholder="请输入选项D" /></td>
                </tr>
                <tr onclick="select(6);">
                    <td>答案</td>
                    <td class="left">
                        <div id="btnAnswers">
                            @foreach (var s in list)
                            {
                                @*string answer = (s == quest.Answer) ? "true" : "false";
                                    <button answer="@answer" onclick="setAnswer('@s')">
                                        <i class="layui-icon">@s</i>
                                    </button>*@
                                <button onclick="setAnswer('@s')">
                                    <i class="layui-icon">@s</i>
                                </button>
                            }
                        </div>
                    </td>
                </tr>
                <tr onclick="select(7);">
                    <td>解析</td>
                    <td class="left"><input id="txtAnalysis" type="text" value="" placeholder="请输入解析" /></td>
                </tr>
                <tr onclick="select(8);">
                    <td>要点</td>
                    <td class="left"><input id="txtPoint" type="text" value="" placeholder="请输入要点" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button class="layui-btn" onclick="save();"><i class="layui-icon layui-icon-file-b"></i>保存</button>
                        <button class="layui-btn" onclick="clearinput();"><i class="layui-icon layui-icon-file-b"></i>清空并新建</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="divright" style="width:40%; float:left;margin:1em; padding:1em; height:40em; overflow-y:auto; ">
        <table style="width:100%;">
            <thead>
                <tr>
                    <th style="min-width:4em;">使用</th>
                    <th>
                        <button class="layui-btn" onclick="comp();"><i class="layui-icon layui-icon-component"></i>导入组件</button>
                        <button class="layui-btn" onclick="log();"><i class="layui-icon layui-icon-log"></i>组件记录</button>
                    </th>
                    <th style="min-width:4em;">删除</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<div id="divtxt" style="display:none;">
    <div class="layui-form" style="margin:1em; padding:1em; ">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">组件文本</label>
            <div class="layui-input-block">
                <textarea id="txtcomp" placeholder="请输入组件文本，每行自动生成一个组件" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="btnok" onclick="ok();"><i class="layui-icon layui-icon-ok"></i>确定</button>
                <button class="layui-btn" id="btncancel"><i class="layui-icon layui-icon-close"></i>取消</button>
            </div>
        </div>
    </div>
</div>
<table style="display:none;">
    <tbody id="divtemp">
        <tr>
            <td>
                <button class="layui-btn layui-btn-sm" onclick="add(this);"><i class="layui-icon layui-icon-return"></i></button>
            </td>
            <td>
                <input type="text" value="tempvalue" />
            </td>
            <td>
                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="del(this);"><i class="layui-icon layui-icon-delete"></i></button>
            </td>
        </tr>
    </tbody>
</table>
<div id="divlogtemp" style="display:none;">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" readonly="readonly" value="tempvalue" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" onclick="use(this);"><i class="layui-icon layui-icon-ok-circle"></i>使用</button>
            <button class="layui-btn layui-btn-danger" onclick="remove(this);"><i class="layui-icon layui-icon-close-fill"></i>移除</button>
        </div>
    </div>
</div>
<div id="divlog" style="display:none;">
    <div class="layui-form" style="margin:1em; padding:1em; ">
    </div>
</div>
@section script{
    <script>
        function save() {
            let obj = new Object();
            obj.ID = $("#txtID").val();
            obj.Title = $("#txtTitle").val();
            obj.OptionA = $("#txtOptionA").val();
            obj.OptionB = $("#txtOptionB").val();
            obj.OptionC = $("#txtOptionC").val();
            obj.OptionD = $("#txtOptionD").val();
            var answerbtn = $("#btnAnswers button[answer=true]");
            if (answerbtn.length==1) {
                obj.Answer=answerbtn.find("i").text();
            } else {
                obj.Answer = "";
            }
            obj.Analysis = $("#txtAnalysis").val();
            obj.Point = $("#txtPoint").val();
            let checked = true;
            if (obj.Title.length == 0) {
                checked = false;
                layer.tips('题目不能为空', '#txtTitle', {
                    tips: [2, '#666666'],
                    tipsMore: true
                });
            }
            if (obj.OptionA.length == 0) {
                checked = false;
                layer.tips('选项A不能为空', '#txtOptionA', {
                    tips: [2, '#666666'],
                    tipsMore: true
                });
            }
            if (obj.OptionB.length == 0) {
                checked = false;
                layer.tips('选项B不能为空', '#txtOptionB', {
                    tips: [2, '#666666'],
                    tipsMore: true
                });
            }
            if (obj.OptionC.length == 0) {
                checked = false;
                layer.tips('选项C不能为空', '#txtOptionC', {
                    tips: [2, '#666666'],
                    tipsMore: true
                });
            }
            if (obj.OptionD.length == 0) {
                checked = false;
                layer.tips('选项D不能为空', '#txtOptionD', {
                    tips: [2, '#666666'],
                    tipsMore: true
                });
            }
            if (obj.Answer.length == 0) {
                checked = false;
                layer.tips('请选择答案', '#btnAnswers', {
                    tips: [2, '#666666'],
                    tipsMore: true
                });
            }
            if (obj.Analysis.length == 0) {
                checked = false;
                layer.tips('解析不能为空', '#txtAnalysis', {
                    tips: [2, '#666666'],
                    tipsMore: true
                });
            }
            if (obj.Point.length == 0) {
                checked = false;
                layer.tips('要点不能为空', '#txtPoint', {
                    tips: [2, '#666666'],
                    tipsMore: true
                });
            }
            if (!checked) {
                return;
            }
            layer.msg("正在保存，请稍候...", {
                icon: 16,
                time: 0,
                shade: 0.3,
                shadeClose: false
            });
            $.ajax({
                type: "POST",
                url: "@Url.Action("QuestSave")",
                data: obj,
                success: function (result) {
                    layer.msg(result.msg);
                    clearinput();
                },
                error: function (err) {
                    layer.msg(err.responseText);
                }
            });
        }

        function clearinput() {
            $("#txtID").val(0);
            $("#txtTitle").val("");
            $("#txtOptionA").val("");
            $("#txtOptionB").val("");
            $("#txtOptionC").val("");
            $("#txtOptionD").val("");
            $("#btnAnswers button").removeAttr("answer");
            $("#txtAnalysis").val("");
            $("#txtPoint").val("");
            select(1);
        }

        function select(i) {
            if (i == null) {
                select(1);
            }
            $("#divleft tbody tr").removeAttr("select");
            $("#divleft tbody tr").eq(i-1).attr("select", "true");
        }
        function selectnext() {
            let tr = $("#divleft tbody tr[select=true]").eq(0);
            let input = tr.find("input");
            if (input.length==0) {
                select(7);
                return;
            }
            let id = input.attr("id");
            if (id == "txtPoint") {
                select(1);
                return;
            }
            tr.next().click();
        }
        function setAnswer(answer) {
            $("#btnAnswers").find("button").each(function (i, ele) {
                let btn = $(ele);
                let s = btn.find("i").eq(0).text() == answer ? "true" : false;
                btn.attr("answer", s);
            });
        }

        function comp() {
            let winw = window.innerWidth * 0.6;
            let winh = window.innerHeight * 0.6;
            $("#txtcomp").css("height", (winh -120) + "px");
            let index = layer.open({
                type: 1,
                area: [winw+'px',winh+'px'],
                shade: false,
                title: false, //不显示标题
                content: $('#divtxt')
            });
            $("#btncancel").click(function () {
                layer.close(index);
            });
        }
        function ok() {
            let text = $("#txtcomp").val();
            let arr = text.split("\n");
            for (var i = 0; i < arr.length; i++) {
                let val = arr[i];
                if (val.trim().length == 0) {
                    continue;
                }
                let tr = $("#divtemp").html();
                tr = tr.replace(/tempvalue/,val)
                $("#divright tbody").append(tr);
                var tr2 = document.getElementById("divlogtemp").innerHTML;
                tr2 = tr2.replace(/tempvalue/, val)
                $("#divlog .layui-form").append(tr2);
            }
            layer.msg("导入组件" + arr.length + "个");
            $('#btncancel').click();
        }
        function use(obj) {
            let val = $(obj).parent().parent().find("input").val();
            let tr = $("#divtemp").html();
            tr = tr.replace(/tempvalue/, val)
            $("#divright tbody").prepend(tr);
            layer.msg("已添加");
        }
        function remove(obj) {
            $(obj).parent().parent().remove();
        }
        function del(obj) {
            $(obj).parent().parent().remove();
        }
        function log() {
            let winw = window.innerWidth * 0.6;
            let winh = window.innerHeight * 0.6;
            let index = layer.open({
                type: 1,
                area: [winw + 'px', winh + 'px'],
                shade: false,
                title: false, //不显示标题
                content: $('#divlog')
            });
            $("#btncancel2").click(function () {
                layer.close(index);
            });
        }
        function add(obj) {
            let comp = $(obj).parent().parent();
            let val = comp.find("input").val();
            let tr = $("#divleft tbody tr[select=true]").eq(0);
            let input = tr.find("input");
            if (input.length == 0) {
                let arr = ['A', 'B', 'C', 'D'];
                let mark = "";
                for (var i = 0; i < arr.length; i++) {
                    if (val.match(arr[i])) {
                        mark = arr[i];
                        break;
                    }
                }
                if (mark == "") {
                    layer.msg("无法匹配答案");
                    return;
                }
                setAnswer(mark);
            } else {
                input.val(input.val() + val);
            }
            comp.remove();
            selectnext();
        }
    </script>
}